<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>用户注册界面</title>
  <style>
    body {
      background-color: pink;
    }
    .container {
      width: 400px;
      margin: 50px auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 20px;
      text-align: center;
    }
    h1 {
      margin-bottom: 20px;
    }
    input {
      width: 100%;
      margin-top: 10px;
      padding: 10px;
      border: none;
      border-radius: 5px;
      background-color: #f1f1f1;
    }
    select {
      width: 100%;
      margin-top: 10px;
      padding: 10px;
      border: none;
      border-radius: 5px;
      background-color: #f1f1f1;
    }
    .submit {
      width: 100%;
      margin-top: 20px;
      padding: 10px;
      border: none;
      border-radius: 5px;
      color: #fff;
      background-color: bisque;
      cursor: pointer;
      transition: 0.3s;
    }
    .submit:hover {
      background-color: #3478d8;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>用户注册</h1>
    <form action="" method="POST">
      <input type="tel" id="phone" name="phone" placeholder="手机号" required>
      <button type="button" id="send-code">发送验证码</button>
      <br>
      <input type="text" id="username" name="username" placeholder="用户名" required>
      <br>
      <select name="gender" id="gender" required>
        <option value="">请选择性别</option>
        <option value="male">男</option>
        <option value="female">女</option>
		<option value="male">沃尔玛购物袋</option>
		<option value="female">非泛型二元性别</option>
      </select>
      <br>
      <input type="email" id="email" name="email" placeholder="个人邮箱" required>
      <br>
      <input type="password" id="password" name="password" placeholder="输入密码" required>
      <br>
      <input type="password" id="password-confirm" name="password-confirm" placeholder="再次确认密码" required>
      <br>
      <button type="submit" class="submit">注册</button>
    </form>
  </div>

  <script>
    
    document.querySelector('#send-code').addEventListener('click', function() {
      var phone = document.querySelector('#phone').value;
      if (!phone) {
        alert('请输入手机号');
        return;
      }
     
      alert('短信验证码已发送');
    });

    document.querySelector('form').addEventListener('submit', function(e) {
      e.preventDefault(); 
      // 219971036殷健翔
      var phone = document.querySelector('#phone').value;
      var username = document.querySelector('#username').value;
      var gender = document.querySelector('#gender').value;
      var email = document.querySelector('#email').value;
      var password = document.querySelector('#password').value;
      var password_confirm = document.querySelector('#password-confirm').value;

      // TODO: 向后端发送注册请求
      alert('注册成功');
    });
  </script>
</body>
</html>
